<template>
	<view class="content">
		<uni-list>
			<uni-section type="line" class="user-info">
				<uni-card :title="userInfo.userName" :sub-title="userInfo.phone" :thumbnail="userInfo.headImg" class="userInfo">
					<view class="uni-body">{{userInfo.roleNames ||''}}(角色)</view>
					<text class="uni-body">{{userInfo.organizationName ||''}}(归属组织)</text>
				</uni-card>

				<picker class="equip-type" @change="equipPickerChange($event)" range-key="label"
					:value="equipType | filterEquipIndex" :range="EQUIP_CLASSIFY">
					<text class="iconfont icon-shuaxin"></text>
					<span>{{ equipType | filterEquipLabel }}</span>
					<text class="iconfont icon-down"></text>
				</picker>
			</uni-section>
		</uni-list>

		<view class="order-message">
			<uni-list v-if="equipTypeCode=='CS'">
				<uni-list-item class="single" v-for="(item,index) in funcList2" :key="index" showArrow
					:title="item.title" link :to="item.url">
				</uni-list-item>
			</uni-list>
			<uni-list v-else>
				<uni-list-item class="single" v-for="(item,index) in funcList1" :key="index" showArrow
					:title="item.title" link :to="item.url">
				</uni-list-item>
			</uni-list>
		</view>
		<view class="order-message">
			<uni-list>
				<uni-list-item class="single" showArrow clickable @click="doSubscribe" title="开启订阅消息">
				</uni-list-item>
			</uni-list>
		</view>
	
		<view class="order-message">
			<uni-list>
				<uni-list-item class="single" showArrow clickable @click="doEditPwd" title="修改密码">
				</uni-list-item>
			</uni-list>
		</view>
		<button type="default" class="logout-btn" @click="isLogout">退出登录</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		subscribeMsg,
		modelId
	} from "@/common/config.js";
	import {
		login
	} from "@/api/my.js";
	import {
		EQUIP_CLASSIFY
	} from "@/common/config.js";
	export default {
		data() {
			return {
				funcList1: [{
						title: "当前告警",
						url: "/pagesA/my/currentWarn/index"
					},
					{
						title: "升级记录",
						url: "/pagesA/my/updateLog/index"
					},
					{
						title: "影像提取记录",
						url: "/pagesA/my/imagExtract/index"
					},
					{
						title: "设备手册",
						url: "/pagesA/my/book/index"
					},
				],
				funcList2: [
					{
							title: "当前告警",
							url: "/pagesA/my/currentWarn/index"
						},
						{
							title: "升级记录",
							url: "/pagesA/my/updateLog/index"
						},
						{
							title: "设备手册",
							url: "/pagesA/my/book/index"
						},
				],
				equipType: uni.getStorageSync('equipTypeCode'),
				EQUIP_CLASSIFY: EQUIP_CLASSIFY,
			}
		},
		computed: {
			...mapState(['userInfo', 'equipTypeCode'])
		},
		filters: {
			filterEquipLabel(val) {
				return EQUIP_CLASSIFY.find((item) => val == item.code).label;
			},
			filterEquipIndex(val) {
				return EQUIP_CLASSIFY.findIndex(item => val == item.code);
			},
		},
		onShow() {
			this.$store.dispatch("updateUserInfo");
		},

		methods: {
			isLogout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success(res) {
						if (res.confirm) {
							that.doLogout();
						}
					}
				})
			},
			doLogout() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			async getTicket() {
				let datas = await login('/ticket', 'post');
				if (datas.code == 200) {
					this.subscribeMsg(datas.data);
				}
			},

			// 订阅消息
			doSubscribe() {
				let that = this;
				// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(res) {
						let itemSettings = res.subscriptionsSetting;
						if (itemSettings.itemSettings && itemSettings.itemSettings[subscribeMsg]) {
							uni.openSetting({
								withSubscriptions: true
							})
						} else {
							that.getTicket();
						}
					}
				})
			},
			subscribeMsg(data) {
				let that = this;
				uni.requestSubscribeDeviceMessage({
					tmplIds: [subscribeMsg],
					sn: data.sn,
					snTicket: data.snTicket,
					modelId: modelId,
					success(res) {
						if (res[subscribeMsg] == 'accept') {
							that.$Toast.success('订阅成功');
						} else if (res[subscribeMsg] == 'reject') { // 用户拒绝授权
							that.$Toast.error('已取消');
						}
					},
					fail(err) {
						if (err.errCode == '20004') {
							uni.showModal({
								title: '温馨提示',
								content: "您的消息订阅主开关已关闭，如需要消息推送服务，请点击确定跳转设置页面打开授权后再次尝试。",
								success: function(modal) {
									if (modal.confirm) { // 点击确定
										uni.openSetting({
											withSubscriptions: true
										})
									}
								}
							})
						} else {
							uni.showModal({
								title: '温馨提示',
								content: err.errMsg,
								success: function(modal) {
									if (modal.confirm) { // 点击确定

									}
								}
							})
						}
					}
				})
			},
			equipPickerChange(e) {
				let index = e.detail.value;
				let value = this.EQUIP_CLASSIFY[index].code;
				let that = this;
				if (value != this.equipType) {
					uni.showModal({
						title: '提示',
						content: `确定要切换为 ${this.EQUIP_CLASSIFY[index].label} 设备分类吗？`,
						confirmColor: '#F54E40',
						success(res) {
							if (res.confirm) {
								that.equipType = value;
								that.doEquipTypeChange();
							}
						}
					})
				}
			},
			// 确认切换设备分类
			doEquipTypeChange() {
				setTimeout(() => {
					this.$store.dispatch("updateUserInfo");
				}, 30);
				// 更新缓存equipType
				uni.setStorageSync('equipTypeCode', this.equipType);
				this.$store.commit('SET_EQUIP_TYPE_CODE', this.equipType);

				this.$Toast.none('设备分类切换成功~');
			},
			doEditPwd(){
				uni.navigateTo({
					url:'/pagesA/my/editPwd/index'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont.css";
	@import "@/static/css/common";

	.single {
		margin: 0 20rpx;
	}

	.logout-btn {
		height: 72rpx;
		line-height: 72rpx;
		background: #51b7b9;
		font-size: 28rpx;
		border-radius: 36rpx;
		margin: 80rpx 40rpx;
		color: #FFFFFF;
	}

	button::after {
		border-color: transparent;
	}

	.order-message {
		border-top: 30rpx solid #efefef;

		/deep/ .uni-list--border-top {
			background-color: transparent;
		}
	}

	.user-info {
		position: relative;

		.equip-type {
			position: absolute;
			right: 42rpx;
			top: 46rpx;
			color: $primary-color;
			font-weight: bold;
			font-size: 30rpx;

			.iconfont {
				font-size: 28rpx;
				margin: 6rpx;
			}
		}
	}
</style>